<template>
  <div>
    <div class="htmlCon">
      <div>
        <el-collapse class="conWrapper" v-model="activeName" accordion>
          <el-collapse-item title="与HTML的一次邂逅" name="2" disabled>
            <div>
              <i class="iconfont icon-html"></i>
              <h2>段落标签 <code>&lt;p&gt;</code></h2>
            </div>
            <blockquote>
              <h4>示例：</h4>
              &lt;p&gt; 段落标签 独占一行的文本标签 &lt;/p&gt; &lt;p&gt;
              段落标签 独占一行的文本标签&lt;/p&gt;
            </blockquote>
            <blockquote>
              <h4>页面中的显示：</h4>
              <p>段落标签 独占一行的文本标签</p>
              <p>段落标签 独占一行的文本标签</p>
            </blockquote>
            <el-divider></el-divider>
            <div>
              <i class="iconfont icon-html"></i>
              <h2>文本标签 <code>&lt;span&gt;</code></h2>
            </div>
            <blockquote>
              <h4>示例：</h4>
              &lt;span&gt; 文本标签 文本标签 并排排列&lt;/span&gt; <br />
              &lt;span&gt; 文本标签 文本标签 并排排列&lt;/span&gt;
            </blockquote>
            <blockquote>
              <h4>页面中的显示：</h4>
              文本标签 文本标签 并排排列文本标签 文本标签 并排排列
            </blockquote>
            <el-divider></el-divider>

            <div>
              <i class="iconfont icon-html"></i>
              <h2>标题标签 <code>&lt;[h1-h6]&gt;</code></h2>
            </div>

            <blockquote>
              <h4>示例：</h4>
              &lt;h1&gt; 标题标签 h1我最大&lt;/h1&gt; <br />
              &lt;h2&gt; 标题标签 h2我第二大&lt;/h2&gt;
            </blockquote>
            <blockquote>
              <h4>页面中的显示：</h4>
              <h1>标题标签 我是h1</h1>
              <h2>标题标签 我是h2</h2>
              <h3>标题标签 我是h3</h3>
            </blockquote>
            <el-divider></el-divider>
            <div>
              <i class="iconfont icon-html"></i>
              <h2>容器标签 <code>&lt;div&gt;</code></h2>
            </div>
            <p>
              介绍：div标签可以作为一个容器使用，它是块级元素，可以进行标签嵌套使用，div自身没有什么特殊性
            </p>
            <blockquote>
              <h4>示例：（嵌套span标签为例）</h4>
              &lt;div&gt;
              <br />
              &nbsp;&nbsp;&nbsp;&nbsp; &lt;span&gt;
              嵌套在div中的span&lt;/span&gt;
              <br />
              &lt;/div&gt; <br />
            </blockquote>
            <blockquote>
              <h4>页面中的显示：</h4>
              <p>嵌套在div中的span嵌套在div中的span</p>
            </blockquote>
            <el-divider></el-divider>
            <div>
              <i class="iconfont icon-html"></i>
              <h2>无序列表标签 <code>&lt;ul&gt; &lt;li&gt;</code></h2>
            </div>
            <p>
              介绍：ul为无序列表，它里面嵌套着li标签，li是ul的子标签，一个li表示一项，他们是成对出现的
            </p>
            <blockquote>
              <h4>示例：</h4>
              &lt;ul&gt;
              <br />
              &nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;我是第一项&lt;/li&gt; <br />
              &nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;我是第二项&lt;/li&gt; <br />
              &nbsp;&nbsp;&nbsp;&nbsp; ........
              <br />
              &lt;/ul&gt; <br />
            </blockquote>
            <blockquote>
              <h4>页面中的显示：</h4>
              <ul>
                <li>我是第一项</li>
                <li>我是第二项</li>
              </ul>
            </blockquote>
            <el-divider></el-divider>
            <div>
              <i class="iconfont icon-html"></i>
              <h2>有序列表标签 <code>&lt;ol&gt; &lt;li&gt;</code></h2>
            </div>
            <p>
              介绍：ol为有序列表，它里面嵌套着li标签，li是ol的子标签，一个li表示一项，他们是成对出现的
            </p>
            <blockquote>
              <h4>示例：</h4>
              &lt;ol&gt;
              <br />
              &nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;我是第一项&lt;/li&gt; <br />
              &nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;我是第二项&lt;/li&gt; <br />
              &nbsp;&nbsp;&nbsp;&nbsp; ........
              <br />
              &lt;/ol&gt; <br />
            </blockquote>
            <blockquote>
              <h4>页面中的显示：</h4>
              <ol>
                <li>我是第一项</li>
                <li>我是第二项</li>
                <li>我是第三项</li>
              </ol>
            </blockquote>
            <el-divider></el-divider>
            <div>
              <i class="iconfont icon-html"></i>
              <h2>表单输入框 <code>&lt;input&gt;</code></h2>
            </div>
            <blockquote>
              <h4>示例：</h4>
              &lt; input type="text" placeholder="可输入的" /&gt;
              <p>input标签中的属性有：type、value、name、placeholder等等</p>
              <h4>页面中的显示：</h4>
              <input class="input" type="text" placeholder="可输入的" />
            </blockquote>
            <el-divider></el-divider>
            <div>
              <i class="iconfont icon-html"></i>
              <h2>按钮元素<code>&lt;button&gt;</code></h2>
            </div>
            <blockquote>
              <h4>示例：</h4>
              &lt;button&gt; 这是一个按钮 &lt;button /&gt;
            </blockquote>
            <blockquote>
              <h4>页面中的显示：</h4>
              <button>这是一个按钮</button>
            </blockquote>
            <el-divider></el-divider>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div>
        <div>
          <div class="htmlNav">
            <el-aside width="200px">
              <el-row class="tac">
                <el-col :span="22">
                  <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#ddd">
                    <el-menu-item index="1" @click="pLabel">
                      <span>p标签</span>
                    </el-menu-item>
                    
                    <el-menu-item index="2" @click="spanLabel">
                      <span>span标签</span>
                    </el-menu-item>
                    
                    <el-menu-item index="3" @click="hLabel">
                      <span>[h1-h6]标签</span>
                    </el-menu-item>
                    
                    <el-menu-item index="4" @click="divLabel">
                      <span>div标签</span>
                    </el-menu-item>
                    
                    <el-menu-item index="5" @click="ulLabel">
                      <span>ul标签</span>
                    </el-menu-item>

                    <el-menu-item index="6" @click="olLabel">
                      <span>ol标签</span>
                    </el-menu-item>

                    <el-menu-item index="7" @click="buLabel">
                      <span>button标签</span>
                    </el-menu-item>

                    <el-menu-item index="8" @click="inLabel">
                      <span>input标签</span>
                    </el-menu-item>
                    <el-menu-item disabled>
                        <span slot="title">持续更新...</span>
                        </el-menu-item>
                      <el-menu-item index="9" @click="top">
                      <span>返回顶部</span>
                    </el-menu-item>
                  </el-menu>
                </el-col>
              </el-row>
            </el-aside>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BasicHTML",
  data() {
    return {
      activeName: ["2"],
      scroll: 100
    };
  },
  methods: {
    pLabel(){
       window.scrollTo(100,120);
    },
    spanLabel(){
       window.scrollTo(100,450);
    },
    hLabel(){
       window.scrollTo(100,770);
    },
    divLabel(){
       window.scrollTo(100,1180);
    },
    ulLabel(){
       window.scrollTo(100,1550);
    },
    olLabel(){
       window.scrollTo(100,2000);
    },
    buLabel(){
       window.scrollTo(100,2500);
    },
     inLabel(){
       window.scrollTo(100,2200);
    },
    top(){
       window.scrollTo(0,0);
    }
  }
};
</script>

<style scoped>
.conWrapper {
  width: 900px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 5px 5px 20px 5px #999;
  padding: 0px 20px;
  border-bottom-color: transparent;
  margin-right: 50px;
}
.htmlCon {
  display: flex;
  justify-content: center;
}
.small {
  text-align: right;
}
.input {
  outline: none;
  font-size: 12px;
  width: 270px;
  height: 25px;
}
.htmlNav {
  position: fixed;

}
 
</style>